
<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
    modelValue: {
        type: String,
    },
    placeholder: {
        type: String,
        default: '请输入'
    },
    type: {
        type: String,
        default: 'text'
    },
    clearable: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
    // icon显示状态
    iconState: {
        type: Boolean,
        default: true
    },
    size: {
        type: String,
        default: 'small'
    },
    maxlength: {
        type: Number,
        default: 10
    }

})
const inputVal = ref(props.modelValue ? props.modelValue : '');
const emit = defineEmits(['update:modelValue'])
</script>

<template>
    <el-input v-model="inputVal" :type="props.type" :size="props.size" :maxlength="props.maxlength"
        :disabled="props.disabled" :clearable="props.clearable" :placeholder="props.placeholder"
        @change="emit('update:modelValue', inputVal)">
        <template #prefix v-if="props.iconState">
            <el-icon class="el-input__icon">
                <search />
            </el-icon>
        </template>
    </el-input>
</template>


<style scoped></style>